<template>
  <div class="systemSettings">
    <!-- 系统设置 -->
    <div class="new_vs">
      <div class="vs-top">
        <p>系统设置</p>
        <!-- <i class="el-icon-close"></i> -->
      </div>
      <!-- 修改的 -->
      <div class="msg">
        <div>
          <span style="margin-left: 65px">公司简称</span>
          <el-input
            ref="inp1"
            v-model="input1"
            placeholder="请输入公司简称"
          ></el-input>
        </div>
        <div>
          <span style="margin-left: 80px">联系人</span>
          <el-input
            ref="inp2"
            v-model="input2"
            placeholder="请输入联系人"
          ></el-input>
        </div>
        <div>
          <span style="margin-left: 63px">手机号码</span>
          <el-input
            ref="inp3"
            v-model="input3"
            placeholder="请输入手机号码"
          ></el-input>
        </div>
        <div>
          <span style="margin-left: 60px">EAN13码</span>
          <el-input
            ref="inp4"
            v-model="ean13"
            placeholder="请输入EAN13码"
            @blur="input3Blur"
            @keyup.enter.native="
              () => {
                $refs.inp5.focus()
              }
            "
          ></el-input>
        </div>

        <div>
          <span>域名</span>
          <el-input placeholder="域名" v-model="domain"></el-input>
        </div>
        <div class="time_container">
          <span style="font-size: 16px; margin-left: 0; margin-right: 8px"
            >当季店铺铺货时间</span
          >
          <el-date-picker
            v-model="datePickerValue"
            type="daterange"
            range-separator="至"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div>
          <span style="line-height: 70px; margin-left: 60px">联系地址</span>
          <el-input
            ref="inp5"
            v-model="input4"
            placeholder="请输入联系地址"
            type="textarea"
            rows="2"
            resize="none"
            @keyup.enter.native="
              () => {
                $refs.inp6.focus()
              }
            "
          ></el-input>
        </div>
        <div>
          <span style="line-height: 70px; margin-left: 80px">备注1</span>
          <el-input
            ref="inp6"
            v-model="input5"
            placeholder="（选填）"
            type="textarea"
            rows="2"
            resize="none"
            @keyup.enter.native="
              () => {
                $refs.inp7.focus()
              }
            "
          ></el-input>
        </div>
        <div>
          <span style="line-height: 70px; margin-left: 80px">备注2</span>
          <el-input
            ref="inp7"
            v-model="input6"
            placeholder="（选填）"
            type="textarea"
            rows="2"
            resize="none"
            @keyup.enter.native="determine"
          ></el-input>
        </div>
      </div>
      <!-- --------------- -->
      <!-- <div class="msg">
        <p>公司简称</p>
        <el-input
          ref="inp1"
          v-model="input1"
          placeholder="请输入公司简称"
        ></el-input>
        <p>联系人</p>
        <el-input
          ref="inp2"
          v-model="input2"
          placeholder="请输入联系人"
        ></el-input>
        <p>手机号码</p>
        <el-input
          ref="inp3"
          v-model="input3"
          placeholder="请输入手机号码"
        ></el-input>
        <p>EAN13码</p>
        <el-input
          ref="inp4"
          v-model="ean13"
          placeholder="请输入EAN13码"
          @blur="input3Blur"
          @keyup.enter.native="
            () => {
              $refs.inp5.focus()
            }
          "
        ></el-input>
        <p>域名</p>
        <el-input placeholder="域名" v-model="domain"></el-input>
        <p style="line-height: 70px">联系地址</p>
        <el-input
          ref="inp5"
          v-model="input4"
          placeholder="请输入联系地址"
          type="textarea"
          rows="2"
          resize="none"
          @keyup.enter.native="
            () => {
              $refs.inp6.focus()
            }
          "
        ></el-input>
        <p style="line-height: 70px">备注1</p>
        <el-input
          ref="inp6"
          v-model="input5"
          placeholder="（选填）"
          type="textarea"
          rows="2"
          resize="none"
          @keyup.enter.native="
            () => {
              $refs.inp7.focus()
            }
          "
        ></el-input>
        <p style="line-height: 70px">备注2</p>
        <el-input
          ref="inp7"
          v-model="input6"
          placeholder="（选填）"
          type="textarea"
          rows="2"
          resize="none"
          @keyup.enter.native="determine"
        ></el-input>
      </div> -->
      <div class="vs-btn">
        <!-- <el-button>取消</el-button> -->
        <el-button @click="determine" type="primary">确定</el-button>
      </div>
    </div>
    <div class="pwd" :style="{ display: show }">
      <p>请输入密码</p>
      <el-input v-model="password" @keyup.enter.native="jump()"></el-input>
      <el-button @click="jump">确认</el-button>
      <el-button
        @click="
          () => {
            this.show = 'none'
          }
        "
        >取消</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getSystemConfig,
  postSystemConfig,
  putSystemConfig
} from '../../../network/operatoryCommand'

import enterUp from '../../../components/mixins/enterUp'
import checkPhone from '../../../components/mixins/checkPhone'

export default {
  mixins: [enterUp, checkPhone],
  created() {
    this.inpList = this.getInput()
    getSystemConfig().then((res) => {
      console.log(res, '121321')
      // console.log(!res.data.data)

      if (!res.data.data) {
        this.isNew = true
      } else {
        this.input1 = res.data.data.companyName
        this.input2 = res.data.data.linkman
        this.input3 = res.data.data.phone
        this.input4 = res.data.data.address
        this.input5 = res.data.data.remarkOne
        this.input6 = res.data.data.remarkTwo
        this.ean13 = res.data.data.ean13No
        this.domain = res.data.data.domain
        this.datePickerValue = [
          res.data.data.inputStartTime.substring(0, 11),
          res.data.data.inputEndTime.substring(0, 11)
        ]
      }
    })
    console.log(this.datePickerValue)
  },
  data() {
    return {
      where: '',
      domain: '',
      inpList: [],
      isNew: false,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      ean13: '',
      password: '',
      show: 'none',
      datePickerValue: []
    }
  },
  methods: {
    setMenu() {
      this.show = 'block'
    },
    jump() {
      if (this.password == '') {
        this.$message.warning('请输入密码')
        return
      }
      if (this.password == 'jx115' && this.where == 1) {
        this.$router.push('/management/menu_settings')
      } else if (this.password == 'jx115' && this.where == 2) {
        this.$router.push('/management/error_record')
      } else {
        this.$message.warning('密码错误')
      }
    },
    determine() {
      // console.log(this.datePickerValue, 'datePickerValue')

      if (!this.input1) {
        this.$alert('公司简称不能为空', '', {
          confirmButtonText: '确定'
        })
        this.$refs.inp6.blur()
        return
      }
      if (!this.input2) {
        this.$alert('联系人不能为空', '', {
          confirmButtonText: '确定'
        })
        this.$refs.inp6.blur()
        return
      }
      if (!this.checkPhoneNumber(this.input3)) {
        this.$refs.inp6.blur()
        return
      }
      if (!this.input4) {
        this.$alert('联系地址不能为空', '', {
          confirmButtonText: '确定'
        })
        this.$refs.inp6.blur()
        return
      }
      // return
      if (this.isNew) {
        // 新建
        let d = {
          companyName: this.input1,
          linkman: this.input2,
          phone: this.input3,
          address: this.input4,
          remarkOne: this.input5,
          remarkTwo: this.input6,
          ean13No: this.ean13,
          domain: this.domain,
          // 新增时间字段
          inputStartTime: this.datePickerValue[0] + ' ' + '00:00:00',
          inputEndTime: this.datePickerValue[1] + ' ' + '23:59:59'
        }
        console.log(d, '1111113.435465')
        postSystemConfig(JSON.stringify(d)).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.isNew = false
          } else {
            this.$message.error('保存失败')
          }
        })
      } else {
        // 修改
        let d = {
          companyName: this.input1,
          linkman: this.input2,
          phone: this.input3,
          address: this.input4,
          remarkOne: this.input5,
          remarkTwo: this.input6,
          ean13No: this.ean13,
          domain: this.domain,
          // 新增时间字段
          inputStartTime: this.datePickerValue[0] + ' ' + '00:00:00',
          inputEndTime: this.datePickerValue[1] + ' ' + '23:59:59'
        }
        putSystemConfig(JSON.stringify(d)).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message.error('修改失败')
          }
        })
      }
    },
    input3Blur() {
      if (this.input3) {
        if (!this.checkPhoneNumber(this.input3)) return
      }
    }
  },
  // f2输密码跳转菜单设置
  mounted() {
    let _this = this
    document.onkeydown = function (event) {
      let e = event || window.event || arguments.callee.caller.arguments[0]
      if (e && e.keyCode == 113) {
        // 按 F2
        if (_this.show == 'none') {
          _this.show = 'block'
          _this.where = 1
        } else {
          _this.show = 'none'
          _this.where = ''
        }
      } else if (e && e.keyCode == 115) {
        // F4
        if (_this.show == 'none') {
          _this.show = 'block'
          _this.where = 2
        } else {
          _this.show = 'none'
          _this.where = ''
        }
      }
    }
  }
}
</script>
<style lang="less">
.systemSettings .el-input__icon {
  line-height: 10px;
}
.systemSettings .el-input {
  display: inline;
}
.systemSettings .el-input__inner {
  height: 30px;
  width: 320px;
}
.systemSettings .el-textarea {
  width: 260px;
  margin-bottom: 10px;
}
</style>

<style lang="less" scoped>
.systemSettings {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.new_vs {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  /* width: 270px; */
  width: 470px;
  padding-bottom: 10px;
  z-index: 99;
  background-color: white;
  box-shadow: 0 0 5px #aaaaaa;
}
.new_vs .vs-top {
  height: 40px;
  background-color: #f8f8f8;
}
.new_vs .vs-top p {
  font-weight: 700;
  float: left;
  line-height: 40px;
  padding-left: 20px;
}
.new_vs .vs-top i {
  float: right;
  line-height: 40px;
  padding: 0 16px;
}
.msg {
  padding: 10px;
  margin-bottom: 10px;
}
.msg p {
  display: inline-block;
  width: 75px;
  text-align: right;
  margin-right: 10px;
  line-height: 40px;
}
.vs-btn {
  margin-right: 49px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.pwd {
  height: 80px;
  border: 1px solid black;
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding-bottom: 10px;
  z-index: 100;
  background-color: white;
  box-shadow: 0 0 5px #aaaaaa;
  text-align: center;
}

//输入框的样式
// input输入框的样式
/deep/.el-input {
  //icon样式
  .el-input__icon {
    line-height: 34px;
  }
  // 宽度生效
  width: 260px;
  height: 32px;
  .el-input__inner {
    height: 32px;
  }
}
// 时间的样式
// 时间选择器的样式（双个）
/deep/.el-date-editor {
  width: 260px;
  height: 32px;
  // 在这个高度上，调整这个时钟icon的行高居中
  .el-range__icon {
    line-height: 27px;
  }
  // 在这个高度上调整这个 '至'显示居中
  .el-range-separator {
    line-height: 26px;
    width: 8%;
  }
}

.msg {
  div {
    display: flex;
    align-items: center;
    margin: 4px 0;
    span {
      margin-left: 94px;
      margin-right: 8px;
    }
  }
}
.new_vs {
  width: 450px;
}
</style>
